import React from 'react';
import {StyleSheet, View} from 'react-native';
import Toast from 'react-native-easy-toast';

import api from '../../../common/api';

import Header from '../../../components/header';
import Middle from './middle';
import Form from './form';

import auth from '../../../common/auth';

export default class extends React.Component {
    state = {
        userInfo: {},
        can_withdraw_cash: 0
    };

    //获取数据
    getData() {
        api({url: 'api/member/getUserMineIndexInfo'})
            .then(data => {
                const {can_withdraw_cash} = data;
                this.setState({
                    can_withdraw_cash
                });
            })
            .catch(e => {
                this.showToast(e.msg);
            });
    }

    //提交申请
    submit = cash_amount => {
        if (this.state.isFetching) {
            return;
        }
        if (!cash_amount) {
            this.showToast('请输入提现金额');
            return;
        }
        if (cash_amount <= 1) {
            this.showToast('最低提现金额为1元');
            return;
        }
        this.setState({
            isFetching: true
        });
        api({url: 'api/member/withdraw', data: {cash_amount}})
            .then(() => {
                this.showToast('提现申请提交成功');
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false
                });
            });
    };

    showToast = (text, time = 1000) => {
        this.refs.toast.show(text, time);
    };

    componentDidMount() {
        auth.getUserInfo()
            .then(userInfo => {
                if (userInfo.alipay_count) {
                    this.showToast('清先绑定支付宝账户', 2000);
                    this.timer = setTimeout(() => {
                        this.props.navigation.replace('bindAliPay');
                    }, 2000);
                    return;
                }
                this.setState({
                    userInfo: userInfo
                }, () => {
                    this.getData();
                });
            })
            .catch(() => {
                auth.goBack();
            });
    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    render() {
        const {userInfo, isFetching, can_withdraw_cash} = this.state;
        return (
            <View style={styles.container}>
                <Header title="提现" theme="dark" wrapperStyle={{backgroundColor: '#f84056'}}/>
                <Middle/>
                <Form userInfo={userInfo}
                      can_withdraw_cash={can_withdraw_cash}
                      isFetching={isFetching}
                      submit={this.submit}/>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f5f5f5',
        flex: 1
    }
});
